<template>
	<div class="basic_wrap">
		<div class="red_top_bg">
			<div class="back_left" @click="$router.back()"></div>
		</div>
		<form @submit.prevent="submit">
			<div class="form">
				<div class="item">
					<div class="label">
						{{$t('authEmail.photo')}}
					</div>
					<van-uploader v-model="fileList" :before-delete="beforeDelete" :after-read="afterRead"
						:max-count="1" />
				</div>
				<div class="item">
					<div class="label">
						{{$t('authEmail.name')}}
					</div>
					<input v-model.trim="form.name" type="text" class="inp" :placeholder="$t('authEmail.name')">
				</div>
				<div class="item">
					<div class="label">
						{{$t('authEmail.idcard')}}
					</div>
					<input v-model.trim="form.idcard" type="text" class="inp" :placeholder="$t('authEmail.idcard')">
				</div>
			</div>
			<button type="submit" class="basic_btn sbtn"
				:class="(form.idcard==''||form.name==''||form.photo=='')?'no_touch':''">{{$t('authEmail.submit')}}</button>

		</form>
	</div>
</template>

<script>
	import Vue from "vue";
	import {
		CountDown,
		Checkbox
	} from "vant";
	import Fetch from '../../utils/fetch';
	import bsHeader from '../../components/bsHeader.vue';
	Vue.use(CountDown)
		.use(Checkbox);
	export default {
		name: "setpwd",
		components: {
			bsHeader
		},
		data() {
			return {
				data: {},
				time: 0,
				code: '',
				form: {
					idcard: '',
					photo: '',
					name: ''
				},
				fileList: [],
			};
		},
		created() {
			this.$parent.footer('user', false);
		},
		mounted() {
			this.start();
		},
		methods: {
			//图片删除前回调，删除时将公共变量forms中的文件信息一并删除
			beforeDelete(file) {
				this.form.photo = ''
				return true;
			},
			afterRead(res) {
				// 此时可以自行将文件上传至服务器

				let forms = new FormData();
				forms.append("file", res.file)
				console.log(res);
				console.log(forms);
				Fetch('/index/img_upload', {
					image: res.content
				}).then((r) => {
					console.log(r)
					this.form.photo = r.data
				});
			},
			start() {
				Fetch('/user/info').then((r) => {
					this.data = r.data;
				});
			},
			timeCall() {
				this.is_send = false;
				this.time = 0;
			},
			sendcode() {
				if (this.is_send) {
					return;
				}
				this.is_send = true;

				Fetch("/index/auth_email_code").then(() => {
						this.time = 60 * 1000;
						this.$toast({
							background: "#07c160",
							message: this.$t('authEmail.sendsuccess'),
						});
					})
					.catch(() => {
						this.is_send = false;
					});
			},
			submit() {
				if(this.form.idcard==''||this.form.name==''||this.form.photo==''){
					return
				}
				Fetch('/user/certification', this.form).then(() => {
					this.$toast({
						background: '#07c160',
						message: this.$t('authEmail.success')
					});
					if (this.$route.query.redirect) {
						this.$router.replace(this.$route.query.redirect + "&money=" + this.$route.query.money)
					} else {
						this.$router.back()
					}
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.van-uploader__upload {
		background-color: #fff;
	}

	.back_left {
		background: url(../../views/images/item/back_b.png) no-repeat center center;
	}

	.big_tit {
		color: #000000;
	}

	.tittle_verified {
		margin-top: 40px;
		margin-bottom: 20px;
		font-size: 26px;
	}

	.form {
		width: 100%;
		padding: 0 20px;
		background-color: #fff;
		overflow: hidden;
		box-shadow: 0px 2px 9px 2px rgba(160, 160, 160, 0.15);
		border-radius: 6px;

		.label {
			width: 100px;
		}

		.item {
			width: 100%;
			// height: 45px;
			border-radius: 2px;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20px 0;
			// padding: 20px 0;
			min-height: 40px;

			input {
				flex: 1;
				padding: 0 10px;
				// height: 22px;
				font-size: 16px;
				// line-height: 22px;
				text-align: right;
			}

			.right_icon {
				width: 13px;
				height: 13px;
				background: url(../images/item/clear.png) no-repeat center center;
				background-size: 100% 100%;
				margin-right: 12px;
			}
		}
	}

	.basic_btn {
		width: 80%;
		margin: 40px auto;
		display: block;
	}
</style>